﻿<link href="Content/layui/css/layui.css" rel="stylesheet" />
<style type="text/css">
.main {height: 100%;}
.main .main-content {background-color: #ffffff;display: table;}
.main .container-left {width: 140px;display: table-cell;vertical-align: top;border-right: 1px solid #f1f1f1;}
.main .container-left ul li.active a {background-color: #3aa8f2;color: #ffffff !important;}
.main .container-left ul li a {padding: 6px 0 6px 20px;display: block;}
.main .container-right {width: 960px;display: table-cell;padding: 0 10px;}
.layui-input,.checkbox-item {width:140px;}
.layui-form-item{margin-bottom:5px;}
.layui-form-label {width:106px;padding:9px 0;}
</style>
<div class="main">
    <div class="container">
        <div class="main-content">
            <div class="container-left">
                <ul class="clearfix">
                    <li class="active">
                        <a href="#">全部</a>
                    </li>
                    <li>
                        <a href="#">12</a>
                    </li>
                    <li>
                        <a href="#">23</a>
                    </li>
                </ul>
            </div>
            <div class="container-right">
                <div class="">
                    <table id="goods-list"></table>
                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本属性</li>
                            <li>样品图示</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <form class="layui-form" action="">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">类别编号</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="输入类别编号" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">编号</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="编号" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">店内码</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="店内码" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="输入名称" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">单位</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="输入单位" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">规格</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="规格" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">品牌</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="品牌" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">检索码</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="检索码" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">辅助条码</label>
                                            <div class="layui-input-block">
                                                <select name="city" lay-verify="required">
                                                    <option value=""></option>
                                                    <option value="0">北京</option>
                                                    <option value="1">上海</option>
                                                    <option value="2">广州</option>
                                                    <option value="3">深圳</option>
                                                    <option value="4">杭州</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">成本价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="成本价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">零售价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="零售价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">批发价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="批发价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">储值卡价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="储值卡价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">会员价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="会员价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">最低售价</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="最低售价" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">库存上限</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="库存上限" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">库存下限</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="库存下限" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">供应商</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="供应商" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">产地</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="产地" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">包装规格</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">柜组</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="柜组" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">坏货类别</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="坏货类别" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">默认折扣零售(%)</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
                                            </div>
                                            <!--<div class="layui-form-mid layui-word-aux">%</div>-->
                            
                                            <!--<div class="layui-form-mid layui-word-aux">%</div>-->
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">折扣批发(%)</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="柜组" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">备注</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">期初库存</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="期初库存" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">提成比列(%)</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" required lay-verify="required" placeholder="提成比列" autocomplete="off" class="layui-input">
                                            </div>
                                            <!--<div class="layui-form-mid layui-word-aux">%</div>-->
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">可以打折销售</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="可以打折销售">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">可以打折销售</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="可以打折销售">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">不计库存</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="不计库存">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">停用</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="停用">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">微店销售</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="微店销售">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">新品</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="新品">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">特惠</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="特惠">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">精品</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="精品">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">热销</label>
                                            <div class="layui-input-block checkbox-item">
                                                <input type="checkbox" name="like[write]" title="热销">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-tab-item">
                                样品图示
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-inline">
        <div class="layui-form-label">查询条件</div>
        <div class="layui-input-inline" style="width:100px;">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0" selected>按编号查</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-btn-container" style="display:inline-block;margin-left:20px">
        <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="seach">查询</button>
        <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="insert">新增</button>
        <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="copy">复制</button>
        <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="image">图片</button>
        <!--<button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="getCheckData">获取选中行数据</button>-->
    </div>
</script>
<script src="Content/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'table', 'element', 'layer'], function () {
        var form = layui.form, $ = layui.$, table = layui.table;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //第一个实例
        table.render({
            elem: '#goods-list'
            , height: 312
            , url: 'https://www.layui.com/demo/table/user' //数据接口
            , toolbar: '#toolbarDemo'
            , page: true //开启分页
            , cols: [[ //表头
                { type: 'radio' }
                , { field: 'id', title: '编号', width: 80, sort: true }
                , { field: 'username', title: '名称', width: 100 }
                , { field: 'sex', title: '规格', width: 80, sort: true }
                , { field: 'city', title: '单位', width: 80 }
                , { field: 'sign', title: '成本价', width: 177 }
                , { field: 'experience', title: '零售价', width: 80, sort: true }
                , { field: 'score', title: '批发价', width: 80, sort: true }
                , { field: 'classify', title: '会员价', width: 80 }
            ]]
        });
    });
</script>